import defaultSettings from '@/settings'
import Cookies from 'js-cookie'
const themeKey = 'hrsaas-82-theme'
const { showSettings, fixedHeader, sidebarLogo, theme } = defaultSettings

const state = {
  showSettings: showSettings,
  fixedHeader: fixedHeader,
  sidebarLogo: sidebarLogo,
  // 后续自己添加的主题色
  // 优先从本地去取主题色,取到了用, 取不到用默认色
  theme: Cookies.get(themeKey) || theme
}

const mutations = {
  // 这样的封装,实现的是复用
  CHANGE_SETTING: (state, { key, value }) => {
    // hasOwnProperty检测对象中是否有某个属性
    // eslint-disable-next-line no-prototype-builtins
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }
    // 将最新修改的主题色同步到本地(页面刷新vuex会丢失状态)
    if (key === 'theme') { // 如果修改了主题色,再同步到本地
      Cookies.set(themeKey, value)
    }
  },
  // 重置主题色
  resetTheme(state) {
    state.theme = theme // 恢复成默认值
  }
  // changeTheme(state, val) {
  //   state.theme = val
  // }
}

const actions = {
  changeSetting({ commit }, data) {
    console.log(data)
    commit('CHANGE_SETTING', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

